<template>
  <div class="projectTrend">
    <div class="projectTrend-left">
      <div class="top">
        <span>任务趋势图</span>
        <div class="switch-year">
          <el-date-picker
            v-model="year"
            type="year"
            @change="switch_year_fn"
            placeholder="选择年" :clearable="false" :editable="false">
          </el-date-picker>
        </div>
      </div>
      <div class="content" id="task-trend-box">

      </div>
    </div>
    <div class="projectTrend-right">
      <div class="top">
        <span>统计列表</span>
      </div>
      <ul class="title">
        <li>年</li>
        <li>月份</li>
        <li>总任务数</li>
        <li>完成数</li>
      </ul>
      <div class="content">
        <vuescroll :ops="ops">
          <ul class="list" v-for="(item,index) in taskTrendData" :key="index">
            <li>{{item.year}}</li>
            <li>{{item.month}}</li>
            <li>{{item.taskNum}}</li>
            <li>{{item.taskCompleteNum}}</li>
          </ul>
        </vuescroll>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  import vuescroll from 'vuescroll'
  // 引入 ECharts 主模块
  import echarts from 'echarts'

  export default {
    name: "taskTrend",
    components: {
      vuescroll,loading
    },
    data() {
      return {
        is_show_loading:true,
        year: '2019',
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '5px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        taskTrendData: [
          {year: 2019, month: 1, taskNum: 1, taskCompleteNum: 1}
        ],//任务趋势数据
        taskNum: [],//任务总数，
        taskCompleteNum: [],//任务完成数
      };
    },
    created() {
      this.year = new Date();
    },
    mounted() {
      this.$nextTick(function () {
        this.getTaskTrendData();
      })
    },
    methods: {
      //切换年
      switch_year_fn() {
        let _this = this;
        this.getTaskTrendData(function () {
          _this.$message.success('切换年份成功');
        });
      },
      //获取任务趋势图
      getTaskTrendFn() {
        let task_trend_Chart = echarts.init(document.getElementById('task-trend-box'));
        let option = {
          color: ['#0755DB', '#FF8F2B'],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [{
              name: '总任务数',
            },
              {
                name: '完成数',
              },
            ],
            top: 50,
            left: 10,
            textStyle: {
              color: '#454A55',
              fontSize: 14
            },
            itemGap: 30,
            itemWidth: 20,
            itemHeight: 2,
            icon: 'stack',
          },
          grid: {
            left: '0',
            top: '130',
            bottom: '0',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: '#fff',
            padding: [0, 0, 0, 0],
            textStyle: {
              color: '#333'
            },
            axisPointer: {
              type: 'line',
              animation: true,
              lineStyle: {
                color: 'transparent'
              }
            },
            extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
            formatter: (params, ticket, callback) => {
              let htmls = '',
                xaxisName = '';
              if (params.length > 0) {
                xaxisName = params[0].axisValue;
                htmls += '<div style="font-size:16px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;text-align: left;">' + xaxisName + '</div><div>';
                for (let j = 0; j < params.length; j++) {
                  htmls += '<p style="font-size:14px;padding:4px 23px 6px 15px;color:#333;text-align: left;">' + params[j].seriesName + ' : ' + params[j].data + '</p>';
                }
                htmls += '</div>';
                return htmls;
              }
            }
          },
          xAxis: {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#EEEEEE'//x轴颜色
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 13,
              color: '#5F5F6B'
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: {
            name: '',
            type: 'value',
            nameRotate: 1,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#eee'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff'//y轴颜色
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              fontSize: 13,
              color: '#5F5F6B'
            }
          },
          series: [
            {
              name: '总任务数',
              type: 'line',
              data: this.taskNum
            },
            {
              name: '完成数',
              type: 'line',
              data: this.taskCompleteNum
            }
          ]
        };
        task_trend_Chart.setOption(option);
      },
      //获取任务趋势数据
      getTaskTrendData(fn) {
        let _this = this;
        this.$http.get('/task/task/count/taskTrend', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            year: this.year.Format('yyyy'),
          }
        }).then(res => {
          if (res.statusCode == 200) {
            let list = res.data;
            _this.taskTrendData = res.data;
            _this.taskNum = [];
            _this.taskCompleteNum = [];
            list.map(function (item, index) {
              _this.taskNum.push(item.taskNum);
              _this.taskCompleteNum.push(item.taskCompleteNum);
            });
            _this.getTaskTrendFn();
            setTimeout(() => {
              this.is_show_loading=false;
            },1000);
            if (fn != undefined) {
              fn.call();
            }
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .projectTrend {
    display: flex;
    width: 100%;
    height: 100%;

    .projectTrend-left {
      width: 1056px;
      height: 100%;
      background-color: #ffffff;
      border-radius: 6px;
      padding: 38px 40px 48px 32px;

      .top {
        color: #454A55;
        font-size: 18px;
        font-weight: Bold;
        position: relative;
        height: 36px;

        .switch-year {
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      .content {
        height: calc(100% - 36px);
      }
    }

    .projectTrend-right {
      min-width: 375px;
      flex: 1;
      background-color: #ffffff;
      height: 100%;
      margin-left: 16px;
      border-radius: 6px;
      padding: 38px 40px 48px 32px;
      box-sizing: border-box;

      .top {
        color: #454A55;
        font-size: 18px;
        font-weight: Bold;
      }

      .title {
        display: flex;

        > li {
          flex: 1;
          text-align: center;
          padding: 40px 0;
          font-size: 12px;
          color: #454A55;
          font-weight: Bold;
        }
      }

      .content {
        overflow-y: auto;
        height: calc(100% - 70px);

        .list {
          display: flex;

          > li {
            flex: 1;
            text-align: center;
            padding-bottom: 40px;
            font-size: 14px;
            color: #7A8A94;
          }
        }
      }
    }

    @media screen and (max-width: 1735px) {
      .projectTrend-left {
        width: 800px;
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .switch-year {
    .el-date-editor.el-input {
      width: 88px;
    }

    .el-input__inner {
      width: 88px;
      height: 36px;
      line-height: 36px;
      padding-right: 0;
      background-color: #F2F6F9;
      border-radius: 6px;
      border-color: #F2F6F9;
      cursor: pointer;
    }

    .el-input__icon {
      line-height: 36px;
    }
  }
</style>
